<template>
  <div id="app">
    <HeadMenu style="margin-bottom: 10px"></HeadMenu>
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <SildeMenu></SildeMenu>
      </a-layout-sider>

      <a-layout>
        <!-- <a-layout-header style="background: #fff; padding-left: 24px;"> -->
           <!-- <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="toggle"
          /> 
          <a-button type="primary" icon="plus" :style="{backgroundColor:'#009688'}" ghost>
            添加
          </a-button>
          <a-button style="" type="danger" icon="rest" ghost>
            删除 
          </a-button>
          <a-button style="" type="primary" icon="redo" :loading="loading" ghost @click="refreshContent">
            刷新   
          </a-button> -->
          <!-- <a-button style="margin-left:30px" type="default">
            个人中心   
            <a-icon type="close-circle" />
          </a-button> -->
        <!-- </a-layout-header> -->

        <a-layout-content
        class="silderbar"
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff',minHeight: '280px',maxHeight:'calc(100vh - 24px - 8px - 48px - 92px)',overflow:'auto',
          scrollbarWidth:'thin',scrollbarColor:'red' }"
        >
          <!-- content -->
          <router-view/>
        </a-layout-content>
      </a-layout>
    </a-layout>

<!--    <img src="./assets/logo.png">-->

  </div>
</template>

<script>
import Index from './components/Index'
import SildeMenu from './components/SildeMenu'
import HeadMenu from './components/HeadMenu'
export default {
  name: 'App',
  components: {
    SildeMenu,
    HeadMenu,
    Index
  },
  data(){
    return{
      loading: false,
    }
  },
  methods: {
    toggle () {
      SildeMenu.toggleCollapsed()
    },
    refreshContent(){
      // this.loading = true;
      // location.reload()
    },
    getBPage(item){
      console.log(item);//item就是传递过来的数据
    },
  },
  mounted(){
    let _this = this;
    this.$bus.on("bPage", function () {
      _this.reload();
    });
    this.$once("hook: beforeDestory", function () {
      _this.$bus.off("bPage");
    });
  },
  created: function () {
    this.$bus.on('bPage', this.getBPage);
  },
  beforeDestroy() {
    this.$bus.off('bPage', this.getBPage);
  }
}
</script>

<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  /*margin-top: 60px;*/
  height:100%;
  overflow: hidden;
}
.ant-layout-sider ant-layout-sider-dark{
  background-color: #fff;
  min-width: auto !important;
  flex: 0 !important;
}
.ant-layout-sider-children{
  background-color: white;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
 ::-webkit-scrollbar  
{  
    width: 5px;
    height:3px;
}

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    border-radius: 10px;  
    background-color: rgba(0, 0, 0, 0.1); 
} 

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(36, 35, 35, 0.1);  
    background-color: rgba(18, 18, 19, 0.1);
}

</style>
